<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>物资列表</el-breadcrumb-item>
            <el-breadcrumb-item>出库记录</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>


        <el-form :model="selectfrom" ref="selectfrom_refs">
            <el-row :gutter="5">

                <el-col :span="3">
                    <el-form-item>
                        <el-input placeholder="出库单编号" v-model="selectfrom.OutboundNumber"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item>
                        <el-input placeholder="物资名称" v-model="selectfrom.Device.DeviceName"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item>
                        <el-input placeholder="物品编号" v-model="selectfrom.Device.DeviceNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择项目" filterable v-model="selectfrom.Project">
                        <el-option :value="0" label="请选择项目"></el-option>
                        <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-select v-model="selectfrom.Device.DeviceCategoryIdOne" placeholder="一级分类" @change="DeviceCategoryIdOne_change">
                            <el-option :value="0" label="一级分类"></el-option>
                            <el-option v-for="item in AllDeviceCategory" v-if="item.ParentId == 0" :value="item.Id" :label="item.DeviceCategoryName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item>
                        <el-select v-model="selectfrom.Device.DeviceCategoryIdTwo" placeholder="二级分类">
                            <el-option :value="0" label="二级分类"></el-option>
                            <el-option v-for="item in DeviceCategoryIdTwolis" :value="item.Id" :label="item.DeviceCategoryName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item>
                        <el-date-picker style="width: 100%" placeholder="开始时间"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        v-model="selectfrom.Start"></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item>
                        <el-date-picker style="width: 100%" placeholder="结束时间"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        v-model="selectfrom.End"></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="2">
                    <el-form-item>
                        <el-button icon="el-icon-search" @click="formdata"></el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="margin-top: 10px">
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%" >
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="OutboundNumber" label="出库单号" width="120" align="center"></el-table-column>
                    <el-table-column prop="DeviceName" show-overflow-tooltip label="名称" width="100" align="center"></el-table-column>
                    <el-table-column prop="DeviceModel" show-overflow-tooltip label="规格型号" width="100" align="center"></el-table-column>
                    <el-table-column prop="DeviceNumber" label="编号"  align="center"></el-table-column>
                    <el-table-column prop="IsReturn" width="120" label="是否全部归还" align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.IsReturn==0" style="color: red">否</label>
                            <label v-if="slot.row.IsReturn==1" style="color: blue">是</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="TotalPrice" label="出库总价"  align="center" ></el-table-column>
                    <el-table-column prop="Amount" label="出库数量"  align="center" >
                        <template slot-scope="slot">
                            <label style="color: blue">{{ slot.row.Amount }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ReturnAmount" label="归还数量"  align="center" >
                        <template slot-scope="slot">
                            <label style="color: green">{{ slot.row.ReturnAmount }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ConsumeAmount" label="消耗数量"  align="center" >
                        <template slot-scope="slot">
                            <label style="color: #1E9FFF">{{ slot.row.ConsumeAmount }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="DamageAmount" label="损坏数量"  align="center" >
                        <template slot-scope="slot">
                            <label style="color: red">{{ slot.row.DamageAmount }}</label>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public";

    export default {
        name: "OutboundRecord",
        data() {
            return {
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                //表格查询数据
                selectfrom: {
                    OutboundNumber: '',
                    Start: '',
                    End: '',
                    Device: {
                        DeviceName: '', //物品名称
                        DeviceNumber: '', //物品编号
                        DeviceCategoryIdOne: 0, //一级分类
                        DeviceCategoryIdTwo: 0, //二级分类
                    },
                    Project: 0,
                },
                //所有物资分类
                AllDeviceCategory: [],
                DeviceCategoryIdTwolis: [],
                //所有项目
                AllProject: [],
            }
        },
        created() {
            this.AllDeviceCategory = publicjs.GetAllDeviceCategory(this.$http)
            this.AllProject = publicjs.GetAllProject(this.$http)
            this.formdata()
        },
        methods: {
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Device/GetOutRecord', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    StartDate: this.selectfrom.Start,
                    EndDate: this.selectfrom.End,
                    Project: this.selectfrom.Project,
                    OutboundNumber: this.selectfrom.OutboundNumber,
                    Device: this.selectfrom.Device,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //物资分类转化
            DeviceCategoryId_conversion(val) {
                for (let i = 0; i < this.AllDeviceCategory.length; i++) {
                    if ((this.AllDeviceCategory)[i].Id == val) {
                        return (this.AllDeviceCategory)[i].DeviceCategoryName
                    }
                }
            },
            //二级分类
            DeviceCategoryIdOne_change(val) {
                this.selectfrom.Device.DeviceCategoryIdTwo = 0
                let newlis = []
                this.AllDeviceCategory.forEach(v => {
                    if (v.ParentId == val) {
                        newlis.push(v)
                    }
                })
                this.DeviceCategoryIdTwolis = newlis
            },
        }
    }
</script>

<style scoped>

</style>
